<template>
<div id="SubjectToSheet">
	<div style="clear:both;"></div>
	<div>
		<span>批量操作：</span>
		<div class="btn btn-sm btn-info cursor mb-2 mr-3" @click="setBatch">
			<span v-if="batch==false">批量</span>
			<span v-else >取消</span>
		</div>
		<div v-if="batch" class="btn btn-sm btn-info cursor mb-2" @click="BatchSetHot">设置权重</div>
		<div v-if="batch" class="btn btn-sm btn-info cursor mb-2" @click="BatchSetTag">添加标签</div>
	</div>
	<table class="table table-bordered table-hover ">
		<thead>
    		<tr>
    		  <th v-if="batch" style="width:50px;"><span @click="BatchAll" class="pass-success cursor">
    		  	<span v-if="ids.length==0">全选</span>
    		  	<span v-else>取消选中</span>
    		  </span></th>
		      <th>封面</th>
		      <th>表情ID</th>
		      <th>内容</th>
		      <th>标签</th>
		      <th>发布人</th>
		      <th>发布时间
		      	<span class="biaoqing-sort clearfloat" @click="goSubject(works.prevPageNumber,keyword,'create_time',!asc)">
	      			<span class="fa fa-sort-up fl" :class="{active:(sort=='create_time' && asc==false)}" style="display:block;"></span>
	      			<span class="fa fa-sort-down fl" :class="{active:(sort=='create_time' && asc==true)}" style="display:block;"></span>
	      		</span>
		      </th>
		      <th>点击量
		      	<span class="biaoqing-sort clearfloat" @click="goSubject(works.prevPageNumber,keyword,'click_num',!asc)">
	      			<span class="fa fa-sort-up fl" :class="{active:(sort=='click_num' && asc==false)}" style="display:block;"></span>
	      			<span class="fa fa-sort-down fl" :class="{active:(sort=='click_num' && asc==true)}" style="display:block;"></span>
	      		</span>
		      </th>
		      <th>点赞
				<span class="biaoqing-sort clearfloat" @click="goSubject(works.prevPageNumber,keyword,'liked_num',!asc)">
	      			<span class="fa fa-sort-up fl" :class="{active:(sort=='liked_num' && asc==false)}"  style="display:block;"></span>
	      			<span class="fa fa-sort-down fl" :class="{active:(sort=='liked_num' && asc==true)}" style="display:block;"></span>
	      		</span>
		      </th>
		      <th>评论数
				<span class="biaoqing-sort clearfloat" @click="goSubject(works.prevPageNumber,keyword,'comment_num',!asc)">
	      			<span class="fa fa-sort-up fl" :class="{active:(sort=='comment_num' && asc==false)}" style="display:block;"></span>
	      			<span class="fa fa-sort-down fl" :class="{active:(sort=='comment_num' && asc==true)}" style="display:block;"></span>
	      		</span>
		      </th>
		      <th>分享数</th>
		      <th>改图数</th>
		      <th>热度值
					<span class="biaoqing-sort clearfloat" @click="goSubject(works.prevPageNumber,keyword,'heat_num',!asc)">
	      			<span class="fa fa-sort-up fl" :class="{active:(sort=='heat_num' && asc==false)}" style="display:block;"></span>
	      			<span class="fa fa-sort-down fl" :class="{active:(sort=='heat_num' && asc==true)}" style="display:block;"></span>
	      		</span>
		      </th>
		      <th>权重</th>
		      <th>操作</th>
		    </tr>
    	</thead>
    	<tbody>
    		<tr v-for="(work,index) in works.items" :class="{bgorange:work.isPrivate}">
    			<td v-if="batch"><input class="cursor" name="selectIds" type="checkbox" v-model="ids" :value="work.id"></td>
    			<td class="img-view" @mouseenter="bigImg"  @mouseleave="clearbigImg">
    				<div class="biaoqing-list-cover">
    					<img class="biaoqing-list-cover-img"  :data-height="work.coverHeight" :data-width="work.coverWidth" :src="[work.fullCover+'!thumb240']" alt="">
    				</div>
    			</td>
    			<td>
    				<router-link v-if="work.isPrivate==false" target="_blank" class="hover-line" :to="'/subjectdetail/'+work.id" v-ripple.stop>{{work.id}}</router-link>
    				<span v-else>{{work.id}}</span>
    			</td>
    			<td class="max-width100">
    				<span class="biaoqing-table-content" :title="work.content">{{work.content}}</span>
    			</td>
	            <td  class="max-width100">
	            	<template v-if="work.isPrivate==false">
		                <span @click="setTags(work.id,index,work.tag)" class="pass-ing cursor hover-line">{{work.tag}}</span>
		                <span v-if="!work.tag" @click="setTags(work.id,index,work.tag)" class="hover-line cursor pass-success">设置</span>
	                </template>
	            </td>
    			<td class="max-width20">
    				<router-link
    					:title="work.userName"
    					:to="'/userDetail/'+work.userId"
    					:class="{'pass-ing':work.userType==5}"
    				>{{work.userName}}{{work.userType}}</router-link>
    			</td>
    			<td class="max-width100 publish-time">
    				<span>{{work.createTime}}</span>
    			</td>
    			<td class="view-num">
    				<span>{{work.clickNum}}</span>
    			</td>
    			<td class="like-num">
    				<span>{{work.likedNum}}</span>
    			</td>
    			<td class="pl-num">
    				<span>{{work.commentNum}}</span>
    			</td>
    			<td class="pl-num">
    				<span>{{work.shareNum}}</span>
    			</td>
    			<td class="pl-num">
    				<span>{{work.coverNum}}</span>
    			</td>
    			<td class="pl-num">
    				<span>{{work.heatNum}}</span>
    			</td>
    			<td class="cursor">
    				<template v-if="work.isPrivate==false">
	    				<span @click="setHotM(0,work.id,index)" class="pass-fail" v-if="work.isHot=='-1'" ><i class="operation-icon fa fa-pencil"></i>不推荐</span>
	    				<span @click="setHotM(1,work.id,index)" class="pass-ing" v-if="work.isHot=='0'" ><i class="operation-icon fa fa-pencil"></i>正常</span>
	    				<span @click="setHotM(0,work.id,index)" class="pass-success" v-if="work.isHot=='1'" ><i class="operation-icon fa fa-pencil"></i>热门</span>
	    			</template>
    			</td>
    			<td class="operation-item" style="width:70px;">
    				<template v-if="work.isPrivate==false">
	    				<template v-if="work.enable==true">
	    					<span v-if="work.you==0" @click="setExcellent(work.id,true,index)" class="hover-line pass-ing">设为精选</span>
	    					<span v-if="work.you==1" @click="setExcellent(work.id,false,index)" class="hover-line ">取消精选</span>

	    					<span @click="setHotM('-1',work.id,index)" class="pass-fail " v-if="work.isHot!='-1'" >不推荐</span>

	    					<span class="text-danger hover-line" @click="deleteSubject(work.id,index)"><i class="operation-icon fa fa-trash-o"></i>删除</span>
	    				</template>
	    				<template v-else>
	    					<span class="text-danger" @click="foreverDelete(work.id,index)"><i class="operation-icon fa fa-trash-o"></i>彻底删除</span>
	    				</template>
    				</template>
    			</td>
    		</tr>
    	</tbody>
	</table>
	<div class="selecTagContainer setTagsContainer">
		<div class="selecTag-bg" @click="selectCancle"></div>
		<div class="selecTag-main">
		  <div class="selecTag-title">添加标签：</div>
		  <div class="clearfloat">
		    <div v-for="tag in tags.data"
		         class="tag-name"
		         :class="{active:(ch==tag.name)}"
		         @click="selectTags(tag.name)"
		    >{{tag.name}}</div>
		  </div>
		  <div>
		    <input type="text" class="form-control mt-2" v-model="ch">
		    <div class="tip mt-2" style="font-size:13px; color:#999;">标签之间请用逗号（,） 隔开</div>
		  </div>
		  <div class="selecTag-btn-box">
		    <div class="selecTag-btn selecTag-cancle" @click="selectCancle">取消</div>
		    <div @click="setTagsView(subjectId,ch)" class="selecTag-btn selecTag-ok">确定</div>
		  </div>
		</div>
	</div>
</div>
</template>
<script>
import { viewImg, clearViewImg } from '../misc/utils'
import swal2 from 'sweetalert2'
import querystring from 'querystring'
import $ from 'jquery'
import toastr from '../misc/toastr.esm'
import storage from 'localStorage'


export default {
    name: 'pagepublic',
    props: ['works','tags','keyword','sort','asc','page'],
    data () {
      return {
        formPage: '',
        subjectId:'',
        batch:false,
        index:'',
        showSetHot:'',
        ids:[],
        setTagType:'',
        ch:''
      }
    },
    methods: {
    	setBatch(){
    		this.batch=!this.batch
    	},
    	BatchAll(){
    		if(this.ids.length==0){
    			this.works.items.forEach(item=>{
	    			this.ids.push(item.id)
	    		})
    		}else{
    			this.ids=[]
    		}
    	},
    	BatchSetTag(){
    		this.setTagType = 'batch'
			$('.setTagsContainer').fadeIn('fast')
    	},
    	BatchSetHot(){
    		var that = this;
    		var ids = this.ids;
    		if(ids.length>0){
				swal2({
				  	title: '输入作品权重',
			    	text:'1为热门，0为正常，-1为不推荐',
					input: 'number',
					inputValue:storage.getItem('hotmessage'),
					showCancelButton: true,
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					showLoaderOnConfirm: true,
					reverseButtons:true,
				  	preConfirm:function(num){
				  		var data={
						  ids: ids,
						  isHot: num
						}
				  		return new Promise(function(resolve,reject){
				  			if(num!=''){
				  				swal2.close();
					  			that.$http.post('/subject/batch/update', data).then(response => {
							        if(response.data.code==200){
							        	var works = that.works;
							        	that.ids = [];
							        	works.items.forEach(res=>{
							        		ids.forEach(id=>{
							        			if(res.id==id){
							        				res.isHot=data.isHot;
							        			}
							        		})
							        	})
					        			toastr.success('设置成功');
							        }else{
							        	toastr.error(response.data.msg);
							        }
							    })
				  			}else{
				  				reject('输入作品权重')
				  			}
				  		})
				  	}
				}).catch(swal2.noop);
    		}else{
    			toastr.error('还没有选中作品');
    		}
    	},
		clearbigImg(e){clearViewImg(e)},
		bigImg(e){viewImg(e,400)},
		goSubject(page,keyword,sort,asc,enable){

			this.$emit('goSubject', page,keyword,sort,asc,enable)
		},
		setHotM(type,id,index){
			var that = this;
			this.showSetHot=false;
			if(id){
				var id=id;
				var index=index;
			}else{
				var id=this.setHot.id;
				var index=this.setHot.index;
			}
			var type=type;
			var params = {
			  "id": id,
			  "isHot": type
			}
			if(type=='1'){
				if(!storage.getItem('hotmessage') || storage.getItem('hotmessage')===""){
					that.$http.post('/subject/update', params).then(response => {
				        if(response.data.code==200){
				        	var works = that.works;
				        	works.items[index].isHot=params.isHot;
		        			toastr.success('设置成功');
				        }else{
				        	toastr.error(response.data.msg);
				        }
				    })
				}else{
					swal2({
					  	title: '输入推送给用户的消息',
				    	text:'谨慎操作！',
						input: 'text',
						inputValue:storage.getItem('hotmessage'),
						showCancelButton: true,
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						showLoaderOnConfirm: true,
						reverseButtons:true,
					  	preConfirm:function(reason){
					  		return new Promise(function(resolve,reject){
					  			if(reason!==''){params.message=reason}
								swal2.close();
					  			that.$http.post('/subject/update', params).then(response => {
							        if(response.data.code==200){
							        	var works = that.works;
							        	works.items[index].isHot=params.isHot;
					        			toastr.success('设置成功');
							        }else{
							        	toastr.error(response.data.msg);
							        }
							    })


					  		})
					  	}
					}).catch(swal2.noop);
				}
			}else{
				if(type){var msg = '设置成功'}else{var msg = '取消成功'}
				that.$http.post('/subject/update', params).then(response => {
			        if(response.data.code==200){
			        	var works = that.works;
			        	works.items[index].isHot=params.isHot;
	        			toastr.success(msg);
			        }else{
			        	toastr.error(response.data.msg);
			        }
			    })
			}
    	},
		setExcellent (id,you,index) {
			var data={
				subjectId:id,
				you:you
			}
			data=querystring.stringify(data)
			this.$http.post('/subject/setYou',data).then(res => {
				if(res.data.code==200){
					var works = this.works;
					if(you==true){
						works.items[index].you=1;
					}else{
						works.items[index].you=0;
					}
					this.$notice.success('操作成功')
				}else{
					this.$notice.error(res.data.msg)
				}
			})
		},
		setTags(id,index,tags){
			this.subjectId = id;
			this.index = index;
			this.setTagType = ''
			if(tags){
			  this.ch = tags;
			}else{
			  this.ch = '';
			}
			$('.setTagsContainer').fadeIn('fast')
		},
		selectCancle(e){
			$('.setTagsContainer').fadeOut('fast')
			this.setTagType = ''
			this.ch = '';
		},
		selectTags(tag){
			if(this.ch.indexOf(tag)<0){
			  if(this.ch==''){
			  	this.ch=tag;
			  }else{
			  	this.ch=this.ch+','+tag;
			  }
			}
		},
      	setTagsView(id,ch) {
			var index = this.index;
			var that = this;
			if (ch != '') {
			  var msg = '设置成功'
			} else {
			  var msg = '取消成功'
			}

			var params = {
			  "id": id,
			  "tag": ch
			}
			if(this.setTagType=='batch'){
				if(this.ids.length==0) return toastr.error('还没有选择作品');
				var data={
				  ids: this.ids,
				  tag: ch
				}
				that.$http.post('/subject/batch/update', data).then(response => {
				  if (response.data.code == 200) {
				    that.goSubject(that.page)
				    toastr.success(msg);
				    that.ch = '';
				    that.ids = []
				    $('.selecTagContainer').fadeOut('fast');
				  } else {
				    that.$notice.error(response.data.msg);
				  }
				})
			}else{
				that.$http.post('/subject/update', params).then(response => {
				  if (response.data.code == 200) {
				    that.goSubject(that.page)
				    toastr.success(msg);
				    that.ch = '';
				    that.subjectId = ''
				    $('.selecTagContainer').fadeOut('fast');
				  } else {
				    that.$notice.error(response.data.msg);
				  }
				})
			}
		},
		deleteSubject(id,index){
    		var that = this;
			swal2({
			  	title: '请输入删除理由',
		    	text:'谨慎操作！',
				input: 'text',
				showCancelButton: true,
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				showLoaderOnConfirm: true,
				reverseButtons:true,
			  	preConfirm:function(reason){
			  		return new Promise(function(resolve,reject){
			  			if(reason !=''){
							swal2.close();
							var params={
								reason:reason
							}
							params=querystring.stringify(params)
				  			that.$http.delete('/subject/'+id+'?reason='+reason).then(response => {
								var works = that.works;
						        if(response.data.code==200){
						        	works.items[index].enable=false;
									swal.close();
				        			toastr.success('删除成功');
						        }else{
						        	swal.close();
				        			toastr.error(response.data.msg);
						        }
						    })
			  			}else{
			  				reject('请输入删除理由');
			  			}

			  		})
			  	}
			}).catch(swal2.noop);
    	},
    	foreverDelete(id,index){
    		var that = this;
  			swal({
			    type: 'warning',
			    title: '您确定?',
   				text: '永久删除该主题!',
			    showCancelButton: true,
			    cancelButtonText: '取消',
			    confirmButtonText: '确定',
			    confirmButtonColor: '#DD6B55',
			    showLoaderOnConfirm: true,
			    closeOnConfirm: false
			}, function(){
				var params={
					ids:id
				}
				that.$http.delete('/subject/',{params:params}).then(response => {
					that.goSubject(that.page)
					var works = that.works;
			        if(response.data.code==200){
						swal.close();
	 			 		toastr.success('删除成功');
			        }else{
			        	swal.close();
	  					toastr.error(response.data.msg);
			        }
			    })
			})
    	}
    }
  }

</script>
<style>
.bgorange{
	background: #f9f9f9;
}
</style>
